<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../css/basic.css" />
    <link rel="stylesheet" href="../sass/index.css" />
    <link rel="stylesheet" href="../css/swiper.css" />
    <link rel="stylesheet" href="../css/animate.min.css" />
  </head>
  <body>

    <!-- @-@include('./header.html') -->

    <div class="indexHeader">
      <div class="videoBox">
        <video
          muted="muted"
          loop="loop"
          autoplay="autoplay"
          height="994"
          width="1920"
        >
          <source src="../videos/index_header.mp4" type="video/mp4" />
        </video>
      </div>
      <div class="indexLogo"></div>
    </div>

    <div class="banner">
        <ul class="img_box">
            <li>
                <img src="../images/pic1.jpg" alt="">
            </li>
            <li>
                <img src="../images/pic2.jpg" alt="">
            </li>
            <li>
                <img src="../images/pic3.jpg" alt="">
            </li>
            <li>
                <img src="../images/pic4.jpg" alt="">
            </li>
            <li>
                <img src="../images/pic5.jpg" alt="">
            </li>
        </ul>
        <ol class="point_box"></ol>
    </div>

    <div class="indexMain container">
      <div class="shopCenter">
        <div class="pageShop">
          <div class="shopItem">
            <div class="icons icon1"></div>
            <div class="txt">
              <p>大国联防军</p>
              <p>后勤补给站</p>
            </div>
            <div class="des">
              <p>可以在此使用角色转移、改名、</p>
              <p>额外雇员购买服务！</p>
            </div>
            <div class="go">             
                <span>马上前往</span>              
            </div>
          </div>
          <div class="shopItem">
            <div class="icons icon2"></div>
            <div class="txt">
              <p>道具商城</p>
            </div>
            <div class="des">
              <p>购买幻想药、外观道具、宠物或坐骑！</p>
              <p>助您在艾欧泽亚的冒险更加丰富多彩！</p>
            </div>
            <div class="go">  
                <span>马上前往</span>             
            </div>
          </div>
          <div class="shopItem">
            <div class="icons icon3"></div>
            <div class="txt">
              <p>周边商城</p>
            </div>
            <div class="des">
              <p>购买【最终幻想】相关系列</p>
              <p>实体周边！</p>
            </div>
            <div class="go">            
                <span>马上前往</span>              
            </div>
          </div>
          <div class="shopItem">
            <div class="icons icon4"></div>
            <div class="txt">
              <p>陆行鸟礼物站</p>
            </div>
            <div class="des">
              <p>充值或消耗时长满足累计条件</p>
              <p>就可领取陆行鸟礼物站充值奖励！</p>
            </div>
            <div class="go">        
                <span>马上前往</span>       
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="login-box">
      <div class="login-content">
        <div class="out">X</div>
        <iframe src="./login.html" frameborder="0" width="450px" height="450px"></iframe>
      </div>
    </div>

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="../images/banner1.jpg" alt="" />
          <div class="rightInfo">
            <div class="ban">
              <img src="../images/banrt1.png" alt="" />
              <div class="title">剧情</div>
              <div
                class="con ani"
                swiper-animate-effect="fadeInUp"
                swiper-animate-duration="0.5s"
                swiper-animate-delay="0.1s"
              >
                <p>宏大而沉重的故事</p>
                <p>永无止境的战斗物语</p>
                <p class="lesno">......</p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="../images/banner2.jpg" alt="" />
          <div class="rightInfo">
            <div class="ban">
              <img src="../images/banrt2.png" alt="" />
              <div class="title">特职</div>
              <div
                class="con ani"
                swiper-animate-effect="fadeInUp"
                swiper-animate-duration="0.5s"
                swiper-animate-delay="0.1s"
              >
                <p>宏大而沉重的故事</p>
                <p>永无止境的战斗物语</p>
                <p class="lesno">......</p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="../images/banner3.jpg" alt="" />
          <div class="rightInfo">
            <div class="ban">
              <img src="../images/banrt3.png" alt="" />
              <div class="title">副本</div>
              <div
                class="con ani"
                swiper-animate-effect="fadeInUp"
                swiper-animate-duration="0.5s"
                swiper-animate-delay="0.1s"
              >
                <p>宏大而沉重的故事</p>
                <p>永无止境的战斗物语</p>
                <p class="lesno">......</p>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <img src="../images/banner4.jpg" alt="" />
          <div class="rightInfo">
            <div class="ban">
              <img src="../images/banrt4.png" alt="" />
              <div class="title">时装</div>
              <div
                class="con ani"
                swiper-animate-effect="fadeInUp"
                swiper-animate-duration="0.5s"
                swiper-animate-delay="0.1s"
              >
                <p>宏大而沉重的故事</p>
                <p>永无止境的战斗物语</p>
                <p class="lesno">......</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    @-@include('./footer.html')
    <script src="../lib/swiper.min.js"></script>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="../lib/swiper.animate1.0.3.min.js"></script>
  </body>
</html>
